<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>18-过滤</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script>
        $(function () {
            /**
             * 知识点：
             * 在jQuery对象中的元素对象数组中过滤出一部分元素来
             *      first()
             *      last()
             *      eq(index | -index)
             *      filter(selector)
             *      not(selector)
             *      has(selector)
            */

            /**
             * 1. ul下li标签第一个
            */
            // $('ul > li').first().css('background', 'red')
            // $('ul > li')[0].style.backgroundColor = 'red'

            /**
             * 2. ul下li标签的最后一个
            */
            // $('ul > li').last().css('background', 'red')

            /**
             * 3. ul下li标签的第二个
            */
            // $('ul > li').eq(1).css('background', 'red')
            // $('ul > li').eq(-4).css('background', 'red')

            /**
             * 4. ul下li标签中title属性为hello的
            */
            // $('ul > li').filter('[title=hello]').css('background', 'red')

            /**
             * 5. ul下li标签中title属性不为hello的
            */
            // $('ul > li').not('[title=hello]').css('background', 'red')
            $('ul > li').filter('[title!=hello]').css('background', 'red')

            /**
             * 6. ul下li标签中有span子标签的
            */
            // $('ul > li').has('span').css('background', 'red')
        })
    </script>
</head>

<body>
    <ul>
        <li>AAAAA</li>
        <li title="hello" class="box2">BBBBB</li>
        <li class="box">CCCCC</li>
        <li title="hello">DDDDDD</li>
        <li title="two"><span>BBBBB</span></li>
    </ul>
    <li>eeeee</li>
    <li>EEEEE</li>
    <br>
</body>

</html>